<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>视频播放器</title>
  <!--字体图标库-->
  <link rel="stylesheet" href="fonts/font-awesome.css" />
  <link rel="stylesheet" href="css/video.css" />
</head>

<body>
  <figure>
    <figcaption>视频播放器</figcaption>
    <div class="player">
      <video src="video/fun.ogv"></video>
      <div class="controls">
        <!--播放/暂停-->
        <a href="javascript:;" class="switch fa fa-play"></a>
        <!--播放进度-->
        <div class="progress">
          <div class="line"></div>
          <div class="bar"></div>
        </div>
        <!--当前播放时间/播放总时长-->
        <div class="timer">
          <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
        </div>
        <!--全屏/取消全屏-->
        <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
      </div>
    </div>
  </figure>
  <script src="js/jquery.min.js"></script>
  <script src="js/video.js"></script>
</body>

</html>